<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="fragments/head :: commonHead('新增风险')">
    <!-- 页面特定样式将由通用头部替代 -->
</head>
<body>
    <div class="container mt-4">
        <div class="row mb-3">
            <div class="col">
                <h2>新增风险</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a th:href="@{/}" class="text-decoration-none">首页</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/risk/list}" class="text-decoration-none">风险列表</a></li>
                        <li class="breadcrumb-item active" aria-current="page">新增风险</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">风险信息</h5>
                    </div>
                    <div class="card-body">
                        <div id="message-area"></div>
                        
                        <form id="riskForm">
                            <!-- CSRF令牌 -->
                            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
                            
                            <div class="form-group">
                                <label for="projectId">所属项目 <span class="text-danger">*</span></label>
                                <select class="form-control" id="projectId" th:disabled="${project != null}" required>
                                    <option value="" th:if="${project == null}">-- 请选择项目 --</option>
                                    <option th:each="p : ${projects}" 
                                            th:value="${p.id}" 
                                            th:text="${p.name}"
                                            th:selected="${project != null && project.id == p.id}"></option>
                                </select>
                                <input type="hidden" id="hiddenProjectId" th:if="${project != null}" th:value="${project.id}">
                            </div>
                            
                            <div class="form-group">
                                <label for="name">风险名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" placeholder="请输入风险名称" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="description">风险描述</label>
                                <textarea class="form-control" id="description" rows="3" placeholder="请详细描述风险的内容、来源和潜在后果"></textarea>
                            </div>
                            
                            <div class="form-group">
                                <label for="type">风险类型</label>
                                <select class="form-control" id="type">
                                    <option value="1">技术风险</option>
                                    <option value="2">管理风险</option>
                                    <option value="3">商业风险</option>
                                    <option value="4">法律风险</option>
                                    <option value="5">其他风险</option>
                                </select>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="probability">发生可能性</label>
                                    <select class="form-control" id="probability">
                                        <option value="1">很低</option>
                                        <option value="2">低</option>
                                        <option value="3" selected>中</option>
                                        <option value="4">高</option>
                                        <option value="5">很高</option>
                                    </select>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="impact">影响程度</label>
                                    <select class="form-control" id="impact">
                                        <option value="1">很低</option>
                                        <option value="2">低</option>
                                        <option value="3" selected>中</option>
                                        <option value="4">高</option>
                                        <option value="5">很高</option>
                                    </select>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="priority">优先级</label>
                                    <select class="form-control" id="priority">
                                        <option value="1">很低</option>
                                        <option value="2">低</option>
                                        <option value="3" selected>中</option>
                                        <option value="4">高</option>
                                        <option value="5">很高</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="ownerId">责任人</label>
                                <select class="form-control" id="ownerId">
                                    <option value="">-- 暂不分配责任人 --</option>
                                    <option th:each="user : ${users}" th:value="${user.id}" th:text="${user.realName}"></option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="status">风险状态</label>
                                <select class="form-control" id="status">
                                    <option value="1" selected>已识别</option>
                                    <option value="2">已分配</option>
                                    <option value="3">已计划</option>
                                    <option value="4">监控中</option>
                                    <option value="5">已解决</option>
                                    <option value="6">已关闭</option>
                                </select>
                            </div>
                            
                            <div class="text-right">
                                <a th:href="@{/risk/list}" class="btn btn-secondary">
                                    <i class="fa fa-arrow-left"></i> 返回列表
                                </a>
                                <button type="button" id="submitBtn" class="btn btn-primary">
                                    <i class="fa fa-save"></i> 保存
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">帮助信息</h5>
                    </div>
                    <div class="card-body">
                        <p><i class="fa fa-info-circle text-info"></i> <strong>风险名称：</strong>简短明确的风险标题</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>风险描述：</strong>详细描述风险的内容、来源和潜在影响</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>风险类型：</strong>风险的分类，有助于团队理解风险来源</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>可能性/影响度/优先级：</strong>评估风险的关键指标</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>责任人：</strong>负责制定响应计划并监控风险的团队成员</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>状态：</strong>表示风险当前所处的阶段</p>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">风险优先级矩阵</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm text-center">
                                <thead>
                                    <tr>
                                        <th>影响/可能性</th>
                                        <th>很低</th>
                                        <th>低</th>
                                        <th>中</th>
                                        <th>高</th>
                                        <th>很高</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th>很高</th>
                                        <td class="bg-warning">中</td>
                                        <td class="bg-warning">高</td>
                                        <td class="bg-danger">高</td>
                                        <td class="bg-danger">很高</td>
                                        <td class="bg-danger">很高</td>
                                    </tr>
                                    <tr>
                                        <th>高</th>
                                        <td class="bg-warning">中</td>
                                        <td class="bg-warning">中</td>
                                        <td class="bg-warning">高</td>
                                        <td class="bg-danger">高</td>
                                        <td class="bg-danger">很高</td>
                                    </tr>
                                    <tr>
                                        <th>中</th>
                                        <td class="bg-info">低</td>
                                        <td class="bg-warning">中</td>
                                        <td class="bg-warning">中</td>
                                        <td class="bg-warning">高</td>
                                        <td class="bg-danger">高</td>
                                    </tr>
                                    <tr>
                                        <th>低</th>
                                        <td class="bg-light">很低</td>
                                        <td class="bg-info">低</td>
                                        <td class="bg-warning">中</td>
                                        <td class="bg-warning">中</td>
                                        <td class="bg-warning">高</td>
                                    </tr>
                                    <tr>
                                        <th>很低</th>
                                        <td class="bg-light">很低</td>
                                        <td class="bg-light">很低</td>
                                        <td class="bg-info">低</td>
                                        <td class="bg-info">低</td>
                                        <td class="bg-warning">中</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script th:src="@{/js/common.js}"></script>
    <script>
        $(function() {
            // 自动计算优先级
            function calculatePriority() {
                var probability = parseInt($('#probability').val());
                var impact = parseInt($('#impact').val());
                var priority;
                
                // 简单的优先级计算逻辑，可以根据实际需要调整
                if (probability >= 4 && impact >= 4) {
                    priority = 5; // 很高
                } else if ((probability >= 4 && impact >= 3) || (probability >= 3 && impact >= 4)) {
                    priority = 4; // 高
                } else if (probability >= 3 && impact >= 3) {
                    priority = 3; // 中
                } else if (probability >= 2 || impact >= 2) {
                    priority = 2; // 低
                } else {
                    priority = 1; // 很低
                }
                
                $('#priority').val(priority);
            }
            
            // 监听可能性和影响度的变化，自动更新优先级
            $('#probability, #impact').change(function() {
                calculatePriority();
            });
            
            // 表单提交
            $('#submitBtn').click(function() {
                // 表单验证
                if (!$('#name').val()) {
                    showMessage('风险名称不能为空', 'danger');
                    return;
                }
                
                if (!$('#projectId').val() && !$('#hiddenProjectId').val()) {
                    showMessage('请选择所属项目', 'danger');
                    return;
                }
                
                // 收集表单数据
                var riskData = {
                    title: $('#name').val(),
                    description: $('#description').val(),
                    projectId: $('#projectId').val() || $('#hiddenProjectId').val(),
                    type: parseInt($('#type').val()),
                    probability: parseInt($('#probability').val()),
                    impact: parseInt($('#impact').val()),
                    level: parseInt($('#priority').val()),
                    ownerId: $('#ownerId').val() ? parseInt($('#ownerId').val()) : null,
                    status: parseInt($('#status').val())
                };
                
                // 显示提交状态
                var $btn = $(this);
                $btn.prop('disabled', true);
                $btn.html('<i class="fa fa-spinner fa-spin"></i> 保存中...');
                
                // 发送请求
                $.ajax({
                    url: '/risk-management/risk/add',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(riskData),
                    success: function(response) {
                        if (response.code === 200) {
                            showMessage('风险添加成功，即将跳转到风险列表...', 'success');
                            setTimeout(function() {
                                window.location.href = '/risk-management/risk/list';
                            }, 2000);
                        } else {
                            showMessage(response.message || '风险添加失败', 'danger');
                            $btn.prop('disabled', false);
                            $btn.html('<i class="fa fa-save"></i> 保存');
                        }
                    },
                    error: function(xhr) {
                        var errorMsg = '系统错误，请稍后再试';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        showMessage(errorMsg, 'danger');
                        $btn.prop('disabled', false);
                        $btn.html('<i class="fa fa-save"></i> 保存');
                    }
                });
            });
            
            function showMessage(message, type) {
                $('#message-area').html(
                    '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' +
                    message +
                    '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                    '<span aria-hidden="true">&times;</span>' +
                    '</button>' +
                    '</div>'
                );
                
                // 滚动到消息区域
                $('html, body').animate({
                    scrollTop: $('#message-area').offset().top - 20
                }, 200);
            }
        });
    </script>
</body>
</html> 